<template>
  <div class="settings">
    <div class="page-header">
      <h2 class="page-title">网站设置</h2>
    </div>

    <el-card class="settings-card">
      <el-tabs v-model="activeTab">
        <!-- 基本设置 -->
        <el-tab-pane label="基本设置" name="basic">
          <el-form
            ref="basicFormRef"
            :model="basicForm"
            :rules="basicRules"
            label-width="120px"
          >
            <el-form-item label="网站名称" prop="site_name">
              <el-input v-model="basicForm.site_name" placeholder="请输入网站名称" />
            </el-form-item>
            <el-form-item label="备案信息" prop="icp">
              <el-input v-model="basicForm.icp_record" placeholder="请输入备案信息" />
            </el-form-item>
            <el-form-item label="版权信息" prop="copyright">
              <el-input v-model="basicForm.copyright" placeholder="请输入版权信息" />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- SEO设置 -->
        <el-tab-pane label="SEO设置" name="seo">
          <el-form
            ref="seoFormRef"
            :model="seoForm"
            :rules="seoRules"
            label-width="120px"
          >
            <el-form-item label="首页标题" prop="index_title">
              <el-input v-model="seoForm.index_title" placeholder="请输入首页标题" />
            </el-form-item>
            <el-form-item label="首页关键词" prop="index_keywords">
              <el-input v-model="seoForm.index_keywords" placeholder="请输入首页关键词，多个关键词用英文逗号分隔" />
            </el-form-item>
            <el-form-item label="首页描述" prop="index_desc">
              <el-input
                v-model="seoForm.index_desc"
                type="textarea"
                :rows="3"
                placeholder="请输入首页描述"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <!-- 保存按钮 -->
      <div class="settings-footer">
        <el-button type="primary" @click="handleSave" :loading="saveLoading">
          保存设置
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getWebsiteSettings, updateWebsiteSettings } from '@/api/settings'

// 当前激活的标签页
const activeTab = ref('basic')

// 基本设置表单
const basicFormRef = ref(null)
const basicForm = reactive({
  site_name: '',
  description: '',
  icp_record: '',
  copyright: ''
})

const basicRules = {
  siteName: [
    { required: true, message: '请输入网站名称', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入网站描述', trigger: 'blur' }
  ]
}

// SEO设置表单
const seoFormRef = ref(null)
const seoForm = reactive({
  index_title: '',
  index_keywords: '',
  index_desc: ''
})

const seoRules = {
  index_title: [
    { required: true, message: '请输入首页标题', trigger: 'blur' }
  ],
  index_keywords: [
    { required: true, message: '请输入首页关键词', trigger: 'blur' }
  ],
  index_desc: [
    { required: true, message: '请输入首页描述', trigger: 'blur' }
  ]
}

// 表单数据
const formData = ref({})
const loading = ref(false)
const saveLoading = ref(false)

// 获取设置
const fetchSettings = async () => {
  try {
    loading.value = true
    const res = await getWebsiteSettings()
    
    // 将返回的数据分配给对应的表单
    const data = res.data
    
    // 基本设置
    basicForm.site_name = data.site_name || ''
    basicForm.icp_record = data.icp_record || ''
    basicForm.copyright = data.copyright || ''
    
    // SEO设置
    seoForm.index_title = data.index_title || ''
    seoForm.index_keywords = data.index_keywords || ''
    seoForm.index_desc = data.index_desc || ''
    
  } catch (error) {
    ElMessage.error('获取设置失败')
  } finally {
    loading.value = false
  }
}

// 保存设置
const handleSave = async () => {
  try {
    saveLoading.value = true
    
    // 合并表单数据
    const saveData = {
      ...basicForm,
      ...seoForm
    }
    
    await updateWebsiteSettings(saveData)
    ElMessage.success('保存成功')
  } catch (error) {
    ElMessage.error('保存失败')
  } finally {
    saveLoading.value = false
  }
}

// 页面加载时获取设置
onMounted(() => {
  fetchSettings()
})
</script>

<style scoped>
.settings {
  min-height: 100%;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
}

.settings-card {
  background: #fff;
  border-radius: 8px;
}

.settings-card :deep(.el-tabs__nav-wrap) {
  padding: 0 20px;
}

.settings-card :deep(.el-tab-pane) {
  padding: 20px;
}

.logo-uploader {
  width: 200px;
  height: 200px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.logo-uploader:hover {
  border-color: #409eff;
}

.logo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}

.logo {
  width: 200px;
  height: 200px;
  display: block;
  object-fit: contain;
}

.upload-tip {
  font-size: 12px;
  color: #666;
  margin-top: 8px;
}

.settings-footer {
  margin-top: 20px;
  padding: 20px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

:deep(.el-form-item) {
  max-width: 600px;
}
</style> 